<template>
  <div class="upload-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>创作投稿</h1>
      <p>分享你的精彩作品，与全球用户一起交流</p>
    </div>
    
    <!-- 上传进度提示 -->
    <div v-if="uploading" class="upload-progress-overlay">
      <div class="progress-container">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
        </div>
        <p class="progress-text">{{ uploadProgress }}%</p>
        <p class="upload-status">{{ uploadStatusText }}</p>
      </div>
    </div>
    
    <!-- 上传表单 -->
    <form class="upload-form" @submit.prevent="submitUpload">
      <!-- 作品类型选择 -->
      <div class="form-section">
        <h2 class="section-title">作品类型</h2>
        <div class="type-selector">
          <button 
            type="button" 
            class="type-btn" 
            :class="{ active: contentType === 'video' }"
            @click="contentType = 'video'"
          >
            <i class="fa fa-video-camera"></i>
            <span>视频</span>
          </button>
          <button 
            type="button" 
            class="type-btn" 
            :class="{ active: contentType === 'image' }"
            @click="contentType = 'image'"
          >
            <i class="fa fa-image"></i>
            <span>图片</span>
          </button>
        </div>
      </div>
      
      <!-- 文件上传区域 -->
      <div class="form-section">
        <h2 class="section-title">{{ contentType === 'video' ? '视频上传' : '图片上传' }}</h2>
        <div 
          class="upload-area" 
          :class="{ 'has-file': selectedFile }" 
          @dragover.prevent 
          @dragenter.prevent
          @drop="handleDrop"
        >
          <div v-if="!selectedFile" class="upload-placeholder">
            <i class="fa fa-cloud-upload"></i>
            <p>点击或拖拽文件到此处上传</p>
            <p class="upload-tip">{{ contentType === 'video' ? '支持 MP4、AVI、MOV 格式，单个文件最大 1GB' : '支持 JPG、PNG、GIF 格式，单个文件最大 10MB' }}</p>
            <input 
              ref="fileInput" 
              type="file"
              :accept="contentType === 'video' ? 'video/*' : 'image/*'"
              class="file-input"
              @change="handleFileSelect"
            >
            <div class="upload-actions">
              <button 
                type="button" 
                class="browse-btn"
                @click="triggerFileInput"
              >
                <i class="fa fa-folder-open"></i>
                浏览文件
              </button>
              <button 
                type="button" 
                class="capture-btn"
                @click="openCamera"
              >
                <i class="fa fa-camera"></i>
                {{ contentType === 'video' ? '拍摄视频' : '拍摄照片' }}
              </button>
            </div>
          </div>
          
          <!-- 已选择文件预览 -->
          <div v-else-if="contentType === 'video'" class="file-preview">
            <video 
              :src="filePreviewUrl" 
              controls 
              class="preview-video"
            ></video>
            <div class="file-info">
              <p class="file-name">{{ selectedFile.name }}</p>
              <p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
            </div>
            <button type="button" class="remove-btn" @click="removeFile">
              <i class="fa fa-times"></i>
            </button>
          </div>
          
          <div v-else class="file-preview">
            <img 
              :src="filePreviewUrl" 
              alt="预览" 
              class="preview-image"
            >
            <div class="file-info">
              <p class="file-name">{{ selectedFile.name }}</p>
              <p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
            </div>
            <button type="button" class="remove-btn" @click="removeFile">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 作品信息填写 -->
      <div class="form-section">
        <h2 class="section-title">作品信息</h2>
        
        <div class="form-group">
          <label for="title">标题 *</label>
          <input 
            id="title" 
            v-model="uploadForm.title" 
            type="text" 
            placeholder="请输入作品标题（1-50字）"
            maxlength="50"
            required
          >
          <div class="char-count">{{ uploadForm.title.length }}/50</div>
        </div>
        
        <div class="form-group">
          <label for="description">简介 *</label>
          <textarea 
            id="description" 
            v-model="uploadForm.description" 
            placeholder="请输入作品简介（10-200字）"
            rows="4"
            maxlength="200"
            required
          ></textarea>
          <div class="char-count">{{ uploadForm.description.length }}/200</div>
        </div>
        
        <div class="form-group">
          <label for="category">分类 *</label>
          <select 
            id="category" 
            v-model="uploadForm.category" 
            required
          >
            <option value="">请选择分类</option>
            <option value="anime">动画</option>
            <option value="comic">漫画</option>
            <option value="game">游戏</option>
            <option value="music">音乐</option>
            <option value="dance">舞蹈</option>
            <option value="tech">科技</option>
            <option value="food">美食</option>
            <option value="travel">旅行</option>
            <option value="lifestyle">生活</option>
            <option value="variety">综艺</option>
            <option value="knowledge">知识</option>
            <option value="other">其他</option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="tags">标签</label>
          <div class="tag-input-container">
            <div class="tag-list">
              <span 
                v-for="(tag, index) in uploadForm.tags" 
                :key="index" 
                class="tag"
              >
                {{ tag }}
                <button type="button" @click="removeTag(index)">×</button>
              </span>
              <input 
                v-model="tagInput" 
                type="text" 
                placeholder="输入标签后按回车添加（最多5个）"
                maxlength="10"
                :disabled="uploadForm.tags.length >= 5"
                @keyup.enter.prevent="addTag"
              >
            </div>
            <p class="tag-tip">最多添加5个标签，每个标签不超过10个字</p>
          </div>
        </div>
        
        <!-- 封面设置（仅视频） -->
        <div v-if="contentType === 'video'" class="form-group">
          <label for="cover">视频封面 *</label>
          <div 
            class="cover-upload-area" 
            :class="{ 'has-cover': coverFile }" 
            @dragover.prevent 
            @dragenter.prevent
            @drop="handleCoverDrop"
          >
            <div v-if="!coverFile" class="cover-placeholder">
              <i class="fa fa-picture-o"></i>
              <p>点击上传封面图片</p>
              <input 
                ref="coverInput" 
                type="file"
                accept="image/*"
                class="cover-input"
                @change="handleCoverSelect"
              >
              <button 
                type="button" 
                class="browse-btn"
                @click="triggerCoverInput"
              >
                选择图片
              </button>
            </div>
            <div v-else class="cover-preview">
              <img :src="coverPreviewUrl" alt="封面预览" class="preview-cover">
              <button type="button" class="remove-btn" @click="removeCover">
                <i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <p class="cover-tip">封面尺寸建议 16:9，支持 JPG、PNG 格式，不超过 2MB</p>
        </div>
        
        <!-- 审核声明 -->
        <div class="form-group">
          <label class="checkbox-label">
            <input v-model="uploadForm.terms" type="checkbox" required>
            <span>我已阅读并同意 <a href="#">《投稿须知》</a> 和 <a href="#">《内容审核规范》</a>，保证投稿内容为本人原创且符合平台规定</span>
          </label>
        </div>
      </div>
      
      <!-- 提交按钮 -->
      <div class="form-actions">
        <button 
          type="submit" 
          class="submit-btn" 
          :disabled="!canSubmit || uploading"
        >
          {{ uploading ? '上传中...' : '发布作品' }}
        </button>
        <router-link to="/" class="cancel-btn">取消</router-link>
      </div>
    </form>
    
    <!-- 创作技巧提示 -->
    <div class="creation-tips">
      <h3 class="tips-title">创作小贴士</h3>
      <div class="tips-content">
        <div class="tip-item">
          <i class="fa fa-lightbulb-o"></i>
          <p><strong>标题要吸引人：</strong>使用简洁有力的标题能提高作品的点击率</p>
        </div>
        <div class="tip-item">
          <i class="fa fa-video-camera"></i>
          <p><strong>视频封面选择：</strong>选择作品中最精彩的画面作为封面，能吸引更多观众</p>
        </div>
        <div class="tip-item">
          <i class="fa fa-tags"></i>
          <p><strong>合理使用标签：</strong>添加相关标签能让更多感兴趣的用户找到你的作品</p>
        </div>
        <div class="tip-item">
          <i class="fa fa-eye"></i>
          <p><strong>内容质量：</strong>保证作品清晰、稳定，内容积极向上</p>
        </div>
      </div>
    </div>
    
    <!-- 拍摄模态框 -->
    <div v-if="showCamera" class="camera-modal-overlay" @click.self="closeCamera">
      <div class="camera-modal">
        <div class="camera-header">
          <h3>{{ contentType === 'video' ? '拍摄视频' : '拍摄照片' }}</h3>
          <button class="close-btn" @click="closeCamera">&times;</button>
        </div>
        
        <div class="camera-container">
          <!-- 摄像头预览 -->
          <video 
            ref="cameraPreview" 
            autoplay 
            muted 
            playsinline
            class="camera-preview"
          ></video>
          
          <!-- 照片预览（拍照后显示） -->
          <div v-if="showCapturedImage" class="captured-image-container">
            <img :src="capturedImageUrl" alt="拍摄预览" class="captured-image">
          </div>
          
          <!-- 视频录制计时器 -->
          <div v-if="recording" class="recording-timer">{{ recordingTime }}</div>
        </div>
        
        <div class="camera-controls">
          <button 
            class="control-btn"
            :disabled="!hasMultipleCameras"
            @click="switchCamera"
          >
            <i class="fa fa-refresh"></i>
            切换摄像头
          </button>
          
          <button 
            class="capture-button"
            :class="{ 'recording': recording }"
            @click="contentType === 'video' ? toggleRecording : captureImage"
          >
            <i class="fa" :class="recording ? 'fa-stop' : 'fa-circle'"></i>
          </button>
          
          <button 
            v-if="(contentType === 'image' && showCapturedImage) || (contentType === 'video' && capturedVideo)"
            class="control-btn"
            @click="useCapture"
          >
            <i class="fa fa-check"></i>
            使用
          </button>
          
          <button 
            v-if="(contentType === 'image' && showCapturedImage) || (contentType === 'video' && capturedVideo)"
            class="control-btn"
            @click="retake"
          >
            <i class="fa fa-refresh"></i>
            重拍
          </button>
        </div>
      </div>
    </div>
    
    <!-- 上传成功提示 -->
    <div v-if="uploadSuccess" class="success-modal">
      <div class="modal-content">
        <div class="success-icon">
          <i class="fa fa-check-circle"></i>
        </div>
        <h3>发布成功！</h3>
        <p>您的作品已成功提交，正在审核中，请耐心等待。</p>
        <div class="modal-actions">
          <router-link to="/profile" class="profile-btn">查看我的主页</router-link>
          <button class="new-upload-btn" @click="resetForm">继续创作</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UploadView',
  data() {
    return {
      contentType: 'video', // 'video' 或 'image'
      selectedFile: null,
      filePreviewUrl: '',
      coverFile: null,
      coverPreviewUrl: '',
      tagInput: '',
      uploading: false,
      uploadProgress: 0,
      uploadStatusText: '',
      uploadSuccess: false,
      uploadForm: {
        title: '',
        description: '',
        category: '',
        tags: [],
        terms: false,
      },
      // 模拟上传延迟
      uploadTimer: null,
      
      // 摄像头相关状态
      showCamera: false,
      mediaStream: null,
      mediaRecorder: null,
      recording: false,
      recordedChunks: [],
      recordingTime: '00:00',
      recordingTimer: null,
      capturedImageUrl: '',
      showCapturedImage: false,
      capturedVideo: null,
      hasMultipleCameras: false,
      currentCamera: 'environment', // 'environment' 或 'user'
    }
  },
  
  computed: {
    canSubmit() {
      // 基本验证：文件、标题、描述、分类、协议都必须填写
      const hasRequiredFields = this.selectedFile && 
        this.uploadForm.title.trim().length >= 1 && 
        this.uploadForm.description.trim().length >= 10 && 
        this.uploadForm.category && 
        this.uploadForm.terms
      
      // 视频还需要封面
      if (this.contentType === 'video' && !this.coverFile) {
        return false
      }
      
      return hasRequiredFields
    },
  },
  
  methods: {
    // 触发文件选择
    triggerFileInput() {
      this.$refs.fileInput.click()
    },
    
    // 打开摄像头
    openCamera() {
      // 检查浏览器支持
      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        alert('您的浏览器不支持摄像头功能，请尝试更新浏览器')
        return
      }
      
      const constraints = {
        video: {
          facingMode: this.currentCamera === 'environment' ? 'environment' : 'user',
          width: { ideal: 1920 },
          height: { ideal: 1080 },
        },
        audio: this.contentType === 'video', // 视频模式下需要音频
      }
      
      navigator.mediaDevices.enumerateDevices()
        .then(devices => {
          // 检查是否有多个摄像头
          const videoDevices = devices.filter(device => device.kind === 'videoinput')
          this.hasMultipleCameras = videoDevices.length > 1
          
          // 请求摄像头权限
          return navigator.mediaDevices.getUserMedia(constraints)
        })
        .then(stream => {
          this.mediaStream = stream
          const videoElement = this.$refs.cameraPreview
          videoElement.srcObject = stream
          
          // 视频录制准备
          if (this.contentType === 'video') {
            this.mediaRecorder = new MediaRecorder(stream, {
              mimeType: 'video/webm;codecs=vp9',
            })
            
            this.mediaRecorder.ondataavailable = (event) => {
              if (event.data.size > 0) {
                this.recordedChunks.push(event.data)
              }
            }
            
            this.mediaRecorder.onstop = () => {
              const blob = new Blob(this.recordedChunks, { type: 'video/webm' })
              this.capturedVideo = blob
              this.recordingTime = '00:00'
            }
          }
          
          this.showCamera = true
          this.showCapturedImage = false
          this.capturedVideo = null
        })
        .catch(error => {
          console.error('摄像头访问失败:', error)
          alert('无法访问摄像头，请检查权限设置或设备连接')
        })
    },
    
    // 关闭摄像头
    closeCamera() {
      this.stopRecording()
      
      if (this.mediaStream) {
        this.mediaStream.getTracks().forEach(track => track.stop())
        this.mediaStream = null
      }
      
      this.showCamera = false
      this.showCapturedImage = false
      this.recording = false
      this.recordedChunks = []
    },
    
    // 切换摄像头
    switchCamera() {
      if (!this.hasMultipleCameras) return
      
      // 先停止当前流
      if (this.mediaStream) {
        this.mediaStream.getTracks().forEach(track => track.stop())
      }
      
      // 切换摄像头模式
      this.currentCamera = this.currentCamera === 'environment' ? 'user' : 'environment'
      
      // 重新打开摄像头
      this.openCamera()
    },
    
    // 拍照
    captureImage() {
      if (this.showCapturedImage) {
        this.useCapture()
        return
      }
      
      const videoElement = this.$refs.cameraPreview
      const canvas = document.createElement('canvas')
      canvas.width = videoElement.videoWidth
      canvas.height = videoElement.videoHeight
      
      const ctx = canvas.getContext('2d')
      ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height)
      
      canvas.toBlob((blob) => {
        this.capturedImageUrl = URL.createObjectURL(blob)
        this.showCapturedImage = true
      }, 'image/jpeg', 0.9)
    },
    
    // 切换录制状态
    toggleRecording() {
      if (this.recording) {
        this.stopRecording()
      } else {
        this.startRecording()
      }
    },
    
    // 开始录制
    startRecording() {
      if (!this.mediaRecorder) return
      
      this.recordedChunks = []
      this.mediaRecorder.start()
      this.recording = true
      
      // 开始计时
      let seconds = 0
      this.recordingTimer = setInterval(() => {
        seconds++
        const minutes = Math.floor(seconds / 60)
        const remainingSeconds = seconds % 60
        this.recordingTime = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
        
        // 限制最长录制时间为5分钟
        if (seconds >= 300) {
          this.stopRecording()
        }
      }, 1000)
    },
    
    // 停止录制
    stopRecording() {
      if (!this.mediaRecorder || !this.recording) return
      
      this.mediaRecorder.stop()
      this.recording = false
      
      if (this.recordingTimer) {
        clearInterval(this.recordingTimer)
        this.recordingTimer = null
      }
    },
    
    // 重拍
    retake() {
      if (this.contentType === 'image') {
        this.showCapturedImage = false
        if (this.capturedImageUrl) {
          URL.revokeObjectURL(this.capturedImageUrl)
          this.capturedImageUrl = ''
        }
      } else {
        this.capturedVideo = null
        this.recordedChunks = []
      }
    },
    
    // 使用拍摄内容
    useCapture() {
      let file = null
      let fileName = ''
      
      if (this.contentType === 'image') {
        // 将base64转换为blob
        fetch(this.capturedImageUrl)
          .then(res => res.blob())
          .then(blob => {
            fileName = `capture_${Date.now()}.jpg`
            file = new File([blob], fileName, { type: 'image/jpeg' })
            this.processFile(file)
            this.closeCamera()
          })
      } else {
        fileName = `capture_${Date.now()}.webm`
        file = new File([this.capturedVideo], fileName, { type: 'video/webm' })
        this.processFile(file)
        this.closeCamera()
      }
    },
    
    // 触发封面选择
    triggerCoverInput() {
      this.$refs.coverInput.click()
    },
    
    // 处理文件选择
    handleFileSelect(event) {
      const file = event.target.files[0]
      if (file) {
        this.processFile(file)
      }
    },
    
    // 处理封面选择
    handleCoverSelect(event) {
      const file = event.target.files[0]
      if (file) {
        this.processCoverFile(file)
      }
    },
    
    // 处理拖拽上传
    handleDrop(event) {
      event.preventDefault()
      const file = event.dataTransfer.files[0]
      if (file) {
        this.processFile(file)
      }
    },
    
    // 处理封面拖拽上传
    handleCoverDrop(event) {
      event.preventDefault()
      const file = event.dataTransfer.files[0]
      if (file) {
        this.processCoverFile(file)
      }
    },
    
    // 处理文件
    processFile(file) {
      // 文件类型验证
      if (this.contentType === 'video' && !file.type.startsWith('video/')) {
        alert('请选择视频文件')
        return
      } else if (this.contentType === 'image' && !file.type.startsWith('image/')) {
        alert('请选择图片文件')
        return
      }
      
      // 文件大小验证
      if (this.contentType === 'video' && file.size > 1024 * 1024 * 1024) { // 1GB
        alert('视频文件不能超过1GB')
        return
      } else if (this.contentType === 'image' && file.size > 1024 * 1024 * 10) { // 10MB
        alert('图片文件不能超过10MB')
        return
      }
      
      this.selectedFile = file
      
      // 创建预览URL
      const reader = new FileReader()
      reader.onload = (e) => {
        this.filePreviewUrl = e.target.result
      }
      
      if (this.contentType === 'video') {
        // 对于视频，我们可以创建一个blob URL
        this.filePreviewUrl = URL.createObjectURL(file)
      } else {
        reader.readAsDataURL(file)
      }
    },
    
    // 处理封面文件
    processCoverFile(file) {
      // 文件类型验证
      if (!file.type.startsWith('image/')) {
        alert('请选择图片文件')
        return
      }
      
      // 文件大小验证
      if (file.size > 1024 * 1024 * 2) { // 2MB
        alert('封面文件不能超过2MB')
        return
      }
      
      this.coverFile = file
      
      // 创建预览URL
      const reader = new FileReader()
      reader.onload = (e) => {
        this.coverPreviewUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },
    
    // 移除文件
    removeFile() {
      if (this.contentType === 'video' && this.filePreviewUrl) {
        URL.revokeObjectURL(this.filePreviewUrl)
      }
      this.selectedFile = null
      this.filePreviewUrl = ''
    },
    
    // 移除封面
    removeCover() {
      this.coverFile = null
      this.coverPreviewUrl = ''
    },
    
    // 添加标签
    addTag() {
      const tag = this.tagInput.trim()
      if (tag && this.uploadForm.tags.length < 5 && !this.uploadForm.tags.includes(tag)) {
        this.uploadForm.tags.push(tag)
        this.tagInput = ''
      }
    },
    
    // 移除标签
    removeTag(index) {
      this.uploadForm.tags.splice(index, 1)
    },
    
    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    
    // 提交上传
    submitUpload() {
      // 检查是否可以提交
      if (!this.canSubmit) return
      
      // 开始模拟上传
      this.uploading = true
      this.uploadProgress = 0
      this.uploadStatusText = '正在准备上传...'
      
      // 模拟上传进度
      let progress = 0
      this.uploadTimer = setInterval(() => {
        progress += Math.random() * 10
        
        if (progress >= 100) {
          progress = 100
          clearInterval(this.uploadTimer)
          
          // 上传完成后显示成功消息
          setTimeout(() => {
            this.uploading = false
            this.uploadSuccess = true
          }, 500)
        }
        
        // 更新进度文本
        if (progress < 30) {
          this.uploadStatusText = '正在上传文件...'
        } else if (progress < 70) {
          this.uploadStatusText = '正在处理文件...'
        } else {
          this.uploadStatusText = '正在保存信息...'
        }
        
        this.uploadProgress = Math.floor(progress)
      }, 300)
    },
    
    // 重置表单
    resetForm() {
      // 清理预览URL
      if (this.contentType === 'video' && this.filePreviewUrl) {
        URL.revokeObjectURL(this.filePreviewUrl)
      }
      
      // 重置所有数据
      this.selectedFile = null
      this.filePreviewUrl = ''
      this.coverFile = null
      this.coverPreviewUrl = ''
      this.tagInput = ''
      this.uploadSuccess = false
      this.uploadForm = {
        title: '',
        description: '',
        category: '',
        tags: [],
        terms: false,
      }
    },
    
    // 组件销毁前清理
    beforeUnmount() {
      // 清理定时器
      if (this.uploadTimer) {
        clearInterval(this.uploadTimer)
      }
      
      // 清理录制定时器
      if (this.recordingTimer) {
        clearInterval(this.recordingTimer)
      }
      
      // 关闭摄像头
      if (this.mediaStream) {
        this.mediaStream.getTracks().forEach(track => track.stop())
      }
      
      // 清理预览URL
      if (this.contentType === 'video' && this.filePreviewUrl) {
        URL.revokeObjectURL(this.filePreviewUrl)
      }
      
      // 清理拍摄预览URL
      if (this.capturedImageUrl) {
        URL.revokeObjectURL(this.capturedImageUrl)
      }
    },
  },
}
</script>

<style scoped>
.upload-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 120px);
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 36px;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  opacity: 0.9;
}

.upload-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.progress-container {
  background-color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  min-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  width: 100%;
  height: 12px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 15px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.upload-status {
  color: #666;
}

.upload-form {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
}

.type-selector {
  display: flex;
  gap: 20px;
}

.type-btn {
  flex: 1;
  padding: 20px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.type-btn:hover {
  border-color: #667eea;
}

.type-btn.active {
  border-color: #667eea;
  background-color: #f0f1ff;
  color: #667eea;
}

.type-btn i {
  font-size: 32px;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.upload-area:hover {
  border-color: #667eea;
  background-color: #f0f1ff;
}

.upload-area.has-file {
  cursor: default;
  background-color: white;
  border-style: solid;
  border-color: #e9ecef;
}

.upload-placeholder i {
  font-size: 64px;
  color: #ccc;
  margin-bottom: 20px;
}

.upload-placeholder p {
  margin-bottom: 10px;
  color: #666;
}

.upload-tip {
  font-size: 14px;
  color: #999;
}

.file-input,
.cover-input {
  display: none;
}

.upload-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.browse-btn, .capture-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.browse-btn {
  background-color: #667eea;
  color: white;
}

.browse-btn:hover {
  background-color: #5a67d8;
  transform: translateY(-2px);
}

.capture-btn {
  background-color: #48bb78;
  color: white;
}

.capture-btn:hover {
  background-color: #38a169;
  transform: translateY(-2px);
}

/* 创作小贴士样式 */
.creation-tips {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  margin-top: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tips-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9ecef;
}

.tips-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #667eea;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tip-item i {
  font-size: 24px;
  color: #667eea;
  margin-top: 2px;
}

.tip-item p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* 摄像头模态框样式 */
.camera-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.camera-modal {
  background-color: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #2a2a2a;
  color: white;
}

.camera-header h3 {
  margin: 0;
  font-size: 20px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.camera-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  min-height: 400px;
}

.camera-preview {
  max-width: 100%;
  max-height: calc(90vh - 200px);
  object-fit: contain;
}

.captured-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

.captured-image {
  max-width: 100%;
  max-height: calc(90vh - 200px);
  object-fit: contain;
}

.recording-timer {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.recording-timer::before {
  content: '';
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.camera-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background-color: #2a2a2a;
}

.control-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.control-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.capture-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid white;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  font-size: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.capture-button:hover {
  transform: scale(1.05);
}

.capture-button.recording {
  background-color: white;
  color: #ff0000;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .upload-actions {
    flex-direction: column;
  }
  
  .tips-content {
    grid-template-columns: 1fr;
  }
  
  .camera-controls {
    padding: 20px;
    gap: 15px;
  }
  
  .capture-button {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .control-btn {
    padding: 10px 16px;
    font-size: 12px;
  }
}

.file-preview {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.preview-video {
  max-width: 300px;
  border-radius: 8px;
}

.preview-image {
  max-width: 300px;
  border-radius: 8px;
}

.file-info {
  flex: 1;
  text-align: left;
}

.file-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.file-size {
  color: #666;
  font-size: 14px;
}

.remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.remove-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.tag-input-container {
  margin-top: 8px;
}

.tag-list {
  min-height: 40px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tag {
  background-color: #e9ecef;
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #495057;
}

.tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  color: #6c757d;
}

.tag button:hover {
  color: #343a40;
}

.tag-list input {
  border: none;
  outline: none;
  padding: 4px;
  font-size: 14px;
  flex: 1;
  min-width: 120px;
}

.tag-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.cover-upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-upload-area:hover {
  border-color: #667eea;
  background-color: #f0f1ff;
}

.cover-upload-area.has-cover {
  cursor: default;
  background-color: white;
  border-style: solid;
  border-color: #e9ecef;
}

.cover-placeholder i {
  font-size: 48px;
  color: #ccc;
  margin-bottom: 10px;
}

.preview-cover {
  max-width: 200px;
  border-radius: 8px;
}

.cover-tip {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: normal;
  color: #666;
}

.checkbox-label input {
  margin-top: 4px;
}

.checkbox-label a {
  color: #667eea;
  text-decoration: none;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.submit-btn {
  padding: 14px 40px;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
  background-color: #5a67d8;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.cancel-btn {
  padding: 14px 40px;
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #f8f9fa;
  border-color: #ccc;
}

.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.success-icon {
  font-size: 64px;
  color: #28a745;
  margin-bottom: 20px;
}

.modal-content h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.modal-content p {
  color: #666;
  margin-bottom: 30px;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.profile-btn,
.new-upload-btn {
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.profile-btn {
  background-color: #667eea;
  color: white;
  border: none;
}

.profile-btn:hover {
  background-color: #5a67d8;
}

.new-upload-btn {
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
}

.new-upload-btn:hover {
  background-color: #f8f9fa;
  border-color: #ccc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .upload-container {
    padding: 10px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
  
  .page-header p {
    font-size: 16px;
  }
  
  .upload-form {
    padding: 20px;
  }
  
  .type-selector {
    flex-direction: column;
    gap: 10px;
  }
  
  .upload-area {
    padding: 20px;
  }
  
  .file-preview {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .preview-video,
  .preview-image {
    max-width: 100%;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .modal-actions {
    flex-direction: column;
  }
}
</style>